<template name='upload_image'>
	<view >
		<!-- 图片管理 遮罩层 -->
		<uni-popup ref="goodsImageUpload" type="center" :title="goodsName" width="90%" height="90%">
				<!-- 增加、删除 -->
				<view class="top-but menu-scroll-w ba-fff" style="width: calc(100% - 20px);">
					<view class="flex relative flex1 floatleft " >
						<view class="riskTitle">商品关键字:</view>
						<input 
						v-model="inp_keyword"
						placeholder="输入商品关键字"
						placeholder-class="placeholder-class"
						@confirm="ipuntLoadGetData()"
						class="search-ipu "
						/>
						<view class="delete-ipu" v-if="inp_keyword!=''" @click="inp_keyword=''">
							<img src="../../static/img/delete-1.png"  ></img>
						</view>
					</view>
					
					<view @click="ipuntLoadGetData()" class="rightButttom" >
						刷新
					</view>
				</view>
				
				<view class="menu-scroll ba-fff" style="height: calc(100% - 120px);">
					
					<view  class="image-box" style="position: sticky;top: 0px;z-index: 11;background-color: #fff;">
						<img :src="imageUrl" class="image" @click="previewImages()"></img>
						<view class="flex" >
							<text selectable="true"  
							class="de  justify alter center cursor" 
							style="margin-bottom: 5px;"
							>
							原始图片
							</text>
						</view>
					</view>
					<view v-for="(item,index) in imageUrlList" class="image-box" :key="index">
						
						<img :src="item.image" class="image" :title="item.title" @click="previewImage(index)"></img>
						<view class="overflow">
							<button class="uploadImagebut" :disabled="item.dis" @click="goodsUpload(item.image,index)">上传</button>
							<span selectable="true" class="title">{{item.title}}</span>
						</view>
					
					</view>
				</view>
			
		</uni-popup>
		<!-- end -->
	</view>
</template>

<script>

	export default{
		name:'upload_image',
		data(){
			return{
				imageUrl:'',
				imageUrlList:[],
				goodsName:'',
				inp_keyword:'',
				sourceGoodsId:''
			}
		},
		methods:{
			goodsUpload(url,index){
				var that = this
				that.$common.get_request(
					{type:'goods_upload',goods_id:that.sourceGoodsId,internetUrl:url},
					(res)=>{
						that.imageUrlList[index].dis = true
						that.$set(that.imageUrlList,index,that.imageUrlList[index])
					}
				);
			},
			/**
			 * 商品图片-打开管理
			*/
			imageOpen(keyword,imageUrl,goods_id){
				console.log("imageUrl",imageUrl)
				this.goodsName = keyword
				var keywords   = this.removeAllBracketsContent(keyword)
				this.imageUrl  = imageUrl.length>0?imageUrl[0].source:''
				this.imageUrlList  = [];//初始化
				this.sourceGoodsId = goods_id
				this.loadGetData(keywords)
				this.$refs.goodsImageUpload.open()
			},
			ipuntLoadGetData(){
				this.loadGetData(this.inp_keyword)
			},
			loadGetData(keyword){
				var that = this
				that.$common.get_request(
					{
						type: 'get_goods_image',
						keyword: keyword,
					},
					(res)=>{
						that.imageUrlList = res.list
					},()=>{
						
					},true,that.$common.baseUrl.host+'/api/api/taobao.php'
				);
			},
			removeAllBracketsContent(str) {
			   if (typeof str !== 'string') return '';
			       
			       // 处理所有类型的括号（包括全角和半角）
			       const bracketPairs = [
			           { left: '(', right: ')' },    // 英文括号
			           { left: '（', right: '）' }   // 中文括号
			       ];
			       
			       let hasChanged;
			       do {
			           hasChanged = false;
			           
			           for (const pair of bracketPairs) {
			               const regex = new RegExp(
			                   `\\${pair.left}[^${pair.left}${pair.right}]*\\${pair.right}`, 
			                   'g'
			               );
			               
			               const newStr = str.replace(regex, '');
			               if (newStr !== str) {
			                   hasChanged = true;
			                   str = newStr;
			               }
			           }
			       } while (hasChanged);
			       
			       return str;
			},
			previewImages(){
				var imgArr = []
				imgArr.push(this.imageUrl)
				uni.previewImage({
					urls:imgArr,
					fail:(e)=>{
					}
				})
			},
			/**
			 * 商品-预览
			*/
			previewImage(index){
				if(this.imageUrlList.length<=0){
					return
				}
				var tmpList = []
				
				tmpList.push(this.imageUrlList[index].image);
				
				uni.previewImage({
					urls:tmpList,
					fail:(e)=>{
					}
				})
			},
		}
	}
</script>

<style>
	.search-ipu {
	    padding: 0px 5px;
	    flex: 1;
	    min-height: 30px;
	    display: flex;
	    margin: auto 0px;
	    color: #1b1b1b;
	    text-align: center;
	    background-color: #fff;
	    /* border: 1px solid #eee; */
	    font-size: 14px;
	    min-width: 100px;
	    border-left: #33333300;
	    text-align: left;
		height: 100%;
	}
	.title{
		font-size: 12px;
		overflow: auto;
		display: flex;

	}
	.ba-fff{
		background-color: #fff;
	}
	.image-box {
	    max-width: 200px;
	    margin: 10px 5px;
	    float: left;
	    position: relative;
	    display: grid;
		height: auto;
	}
	.image{
		width: 100%;
		height: 100%;
		border: solid 1px #eee;
		border-radius: 5px;
		max-width: 200px;
		height: 200px;
	}
	.overflow{
		overflow: auto;
	}
	.uploadImagebut{
		font-size: 14px;
		padding: 3px 10px;
		border-radius: 8px;
		background-color: #0f66e0;
		color: #fff;
		width: max-content;
		text-align: center;
		justify-content: center;
		display: flex;
		margin: auto;
	}
	.menu-scroll-w {
	    text-overflow: ellipsis;
	    width: 100%;
	}
	.top-but {
		display: flex;
		flex-direction: row;
		gap: 10px;
		padding: 10px;
		margin: auto;
		flex: 1;
	}
	.top-but-box {
	    flex-direction: row;
	    width: 100%;
	    justify-content: start;
	    display: flex;
	    float: left;
	    padding: 0px;
	}
	.floatleft {
	    float: left;
	    margin: auto 5px;
	    height: 32px;
	}
	.flex1 {
	    flex: 1;
	}
	.flex {
	    display: flex;
	}
	.rightButttom {
	    min-width: 50px;
	    padding: 1px 15px;
	    display: flex;
	    border-radius: 0px;
	    height: 32px;
	    justify-content: center;
	    align-items: center;
	    margin: auto 10px auto auto;
	    background-color: #0f66e0;
	    cursor: pointer;
	    color: #fff;
	    font-size: 14px;
	    border-radius: 5px;
		white-space: nowrap;
	}
	.menu-scroll {
	    overflow: auto;
	    text-overflow: ellipsis;
	    padding-bottom: 50px;
	    height: 100%;
	}
	.riskTitle{
		display: flex;
		text-align: center;
		justify-content: center;
		flex-direction: column;
		background-color: #f5f7fa;
		padding: 0px 5px;
		height: 32px;
		margin: auto 0px auto 0px;
		font-size: 14px;
	}
</style>
